<script setup lang="ts">
  import { reactive, ref, onMounted } from 'vue';
  import { systemInfo } from '@/utils/system.js';
  import keFuInfo from './moke.js';

  const indexMap = [
    'payProb',
    'orderProb',
    'deliProb',
    'afterProb',
    'reviewProb',
    'otherProb'
  ];

  const state = ref({
    active_num: 1,
    active_info: -1,
    phone_number: '400-100-5678',
    keFuInfo: keFuInfo,
    indexMap: {
      1: 0,
      2: 1,
      3: 2
    },
    probInfo: keFuInfo[0],
    customer_qr: `https://dhx.liangmoren.com/public/Snipaste_2024-05-08_23-43-31.png`
  });

  const changTab = (e) => {
    state.value.active_num = e;
    state.value.active_info = -1;
    state.value.probInfo = keFuInfo[indexMap[e - 1]];
  };

  const selectCustomerInfo = (i) => {
    state.value.active_info = i === state.value.active_info ? -1 : i;
  };

  const callCustomer = () => {
    uni.makePhoneCall({
      phoneNumber: state.value.phone_number
    });
  };
</script>

<template>
  <view class="relative w-full bg-slate-100" style="height: calc(100vh - 50px)">
    <view class="relative w-full h-400">
      <image
        class="w-full"
        :style="{
          width: '100%',
          height: '400rpx',
          position: 'relative',
          top: 0
        }"
        src="https://dhx.liangmoren.com/public/xiaomi.jpg"
      ></image>
      <view class="absolute" style="top: 55%; right: 60rpx">
        <view
          class="font-bold text-xl text-white"
          style="text-shadow: 0px 2px 0px #333"
        >
          有问题找客服
        </view>
        <view class="text-sm text-white pt-mini">工作时间：9:00~19:00</view>
      </view>
    </view>
    <view class="w-full">
      <view class="bz_wrap">
        <!-- 帮助btn列表 -->
        <view class="bangZhu rd_default">
          <view class="bangZhu_btn_list">
            <view
              :class="state.active_num === 1 ? 'active_btn' : ''"
              class="btn_item"
              @click="changTab(1)"
            >
              支付问题
            </view>
            <view
              :class="state.active_num === 2 ? 'active_btn' : ''"
              class="btn_item"
              @click="changTab(2)"
            >
              订单问题
            </view>
            <view
              :class="state.active_num === 3 ? 'active_btn' : ''"
              class="btn_item"
              @click="changTab(3)"
            >
              发货问题
            </view>
            <view
              :class="state.active_num === 4 ? 'active_btn' : ''"
              class="btn_item"
              @click="changTab(4)"
            >
              售后问题
            </view>
          </view>
          <!-- info_list -->
          <view class="bangZhu_prob">
            <view
              style="width: 100%"
              v-for="(item, index) in state.probInfo"
              :class="state.active_info === index ? 'active_info' : ''"
              :key="index"
              @click="selectCustomerInfo(index)"
            >
              <view class="prob_item d-c-c d-r">
                <view class="prob_number">{{ index + 1 }}</view>
                <view class="prob_content">{{ item.head }}</view>
                <view class="prob_arrow d-e-c">
                  <image
                    style="height: 26rpx"
                    src="@/static/images/arrow.svg"
                    mode="scaleToFill"
                  />
                </view>
              </view>
              <!-- 展示信息 -->
              <view class="desc">
                {{ item.body }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 垫块 -->
      <view class="heel"></view>

      <!-- phone -->
      <view class="keFu d-b-c d-r">
        <view class="keFu_item rd_default d-c-c d-r" @click="callCustomer">
          <image
            style="height: 36rpx; width: 36rpx"
            class="mr20"
            src="@/static/images/phone-fill.png"
            mode="scaleToFill"
          />
          <view>客服电话</view>
        </view>
        <view class="keFu_item rd_default d-c-c d-r">
          <image
            style="height: 36rpx; width: 36rpx"
            class="mr20"
            src="@/static/images/message.png"
            mode="scaleToFill"
          />
          <view>平台客服</view>
        </view>
      </view>

      <!-- qr -->
      <view
        class="w-[550rpx] p-large-2 flex flex-col justify-center items-center m-auto bg-white rounded-lg border-1 border-solid border-gray-200"
      >
        <view class="qr_title text-sm">长按下载二维码，关注公众微信号</view>
        <image
          style="width: 360rpx; height: 360rpx; background-color: aliceblue"
          :src="state.customer_qr"
          mode="scaleToFill"
          show-menu-by-longpress
        />
      </view>

      <!-- 垫块 -->
      <view class="heel-160"></view>
    </view>
  </view>
</template>
